<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <el-button type="primary" style="float: right;" size="small" @click="showAdd">添加</el-button>
      </div>
      <el-dialog :title="addOrWrite?'添加区域':'修改区域'" :visible.sync="showAddFormdialog" width="420px" @close="cancelForm('taskRef')">
        <el-form ref="taskRef" :model="taskForm" :rules="taskrules" label-width="60px">
          <el-form-item label="区域" prop="name">
            <el-input v-model="taskForm.name" style="width:300px"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button type="primary" @click="submitForm('taskRef')">确认</el-button>
        </span>
      </el-dialog>
      <el-table
        :header-cell-style="{background:'#f5f5f5'}"
        :data="tableData"
        style="width: 100%">
        <el-table-column prop="name" label="区域">
        </el-table-column>
        <!-- <el-table-column prop="name2" label="指标">
        </el-table-column> -->
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
          <el-button v-if="scope.row.id != 1" type="success" size="small" @click="showAddWrite(scope.row)">修改</el-button>
          <el-button v-if="scope.row.id != 1" type="danger" size="small" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      taskForm:{
        name:"",
        id:''
      },
      taskrules:{
        name:[{ required: true, message: '内容不能为空', trigger: 'blur' }]
      },
      showAddFormdialog: false,
      addOrWrite:true
    }
  },
  methods:{
    getData(){
      this.$axios.post('district/getAllDistrict').then(res=>{
				if(res.code==200){
					this.tableData = res.data;
					console.log(this.tableData)
				}
			})
			.catch(err=>{
				console.log(err);
			})
    },
    // 确认按钮
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            let obj={
            name:this.taskForm.name
          };
          if(this.taskForm.id){
            obj.id=this.taskForm.id;
            this.updataTask(obj);
          }else{
            this.addTask(obj);
          }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    // 添加
    showAdd(){
      this.showAddFormdialog =true;
      this.addOrWrite = true;
    },
    // 修改
    showAddWrite(data){
      // console.log(data,'aa')
      this.showAddFormdialog =true
      this.addOrWrite = false
      this.taskForm.name=data.name;
      this.taskForm.id = data.id
    },
    // 关闭弹窗
    cancelForm(formName){
      this.taskForm = {
        name:'',
        id:''
      };
      this.$refs[formName].resetFields();
    },
    // 添加
    addTask(data){
      this.$axios.post('district/addDistrict',data).then(res=>{
          if(res.code==200){
            this.$message.success('添加成功');
            this.showAddFormdialog = false;
            this.getData()
          }
        })
        .catch(err=>{
          console.log(err);
        })
    },
    // 修改
    updataTask(data){
      this.$axios.post('district/updateDistrict',data).then(res=>{
          if(res.code==200){
            this.$message.success('修改成功');
            this.showAddFormdialog = false;
            this.getData()
          }
        })
        .catch(err=>{
          console.log(err);
        })
    },
    // 删除
    del(data){
      this.$confirm("此操作将删除该区域, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$axios.post('district/getDeleteDistrict',{id:data.id},2).then(res=>{
          if(res.code==200){
            this.$message.success('删除成功');
            this.getData()
          }
        })
        .catch(err=>{
          console.log(err);
        })
      }).catch(e=>e);;
    }
  },
  mounted(){
    this.getData()
  }
}
</script>

<style scoped>

